﻿<html>
<style>
    body {
        background-color:white;
        color:#000000;
        font-family: "Helvetica Neue", Helvetica, Verdana, Arial;
        margin: 0;
    }
    a#logo {
        position: absolute;
        top: 8px;
        right: 5px;
        width: 40px;
        height: 30px;
        background-repeat: no-repeat;
        background-image: url();
    }
    h1 {
        color: #FFF;
        font-size: 26px;
        font-weight: normal;
        margin: 0;
        padding: 0 0 0 15px;
        line-height: 48px;
        min-height: 48px;
        border-radius: 0px;
        border-bottom: 1px solid #191e23;
        background: #2c3742; /* Old browsers */
        background: -moz-linear-gradient(top,  #2c3742 0%, #28303a 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c3742), color-stop(100%,#28303a)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #2c3742 0%,#28303a 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3742', endColorstr='#28303a',GradientType=0 ); /* IE6-9 */
    }
    a {
        color: #428bca;
        font-weight: bold;
        text-decoration: none;
    }
    a:hover, a:focus {
        color: #2a6496;
        text-decoration: underline;
    }
    body, textarea, input, table, td {
        font-size: 18px;
    }
    td {
        vertical-align: top;
    }
    textarea {
        width: 100%;
        font-family: Monaco, Consolas;
        resize:vertical;
        min-height: 630px;
        padding: 10px 10px 0 10px;
    }
    input {
        padding: 5px 10px; 
    }
    .live-template {
        padding: 10px 30px;
    }
    .live-template textarea {
        font-family: Monaco, Consolas;
        font-size: .98rem;
        line-height: 1.20rem;
    }
    .live-template .output {
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 25px 35px;
        margin-top: .5em;
        margin-bottom: 30px;
        font-size: 1.2em;
        line-height: 1.5em;
        user-select: none;
        min-height: 300px;
    }
    .live-template .output {
        white-space: pre;
    }
    .live-template.error {
        border-color: #a94442;
    }
    .error .output {
        padding: 0;
    }
    .error textarea {
    }
    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    .alert {
        padding: .75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
    }
    pre {
        white-space: pre-wrap;
    }
    table {
        width: 100%;
        margin-bottom: 10px;
    }
    caption, th, td {
        padding: 2px 5px;
        text-align: left;
    }
    caption {
        padding: 5px 8px;
        background: #f1f1f1;
    }
</style>
<body>
<a id="logo" href="https://servicestack.net" title="ServiceStack"></a>
<h1>Debug Template</h1>

<div class="live-template">
    <p>
        This Debug template has access to
        <a href="http://templates.servicestack.net/docs/default-filters">Default Fitlers</a>, <a href="http://templates.servicestack.net/docs/info-filters">Info Fitlers</a>
        as well as any arguments registered in <a href="http://templates.servicestack.net/docs/view-engine">TemplatePagesFeature</a>.
    </p>
    <div class="template">
        <textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">{0}</textarea>
    </div>
    <div class="result"><div class="output"></div></div>
</div>
<script>
    var el = document.querySelector('.live-template');
    var textarea = document.querySelector('textarea');
    var output = document.querySelector('.output');
    textarea.oninput = function () {
        var template = this.value;
        
        fetch(location.pathname, {
            method: "POST",
            body: JSON.stringify({ template: template }), //sync with: TemplateMetadataDebug
            credentials: 'include',
            headers: {
                'Accept': 'text/html, */*',
                'Content-Type': 'application/json'
            }
        })
        .then(function (res) {
            if (!res.ok)
                throw res;
            
            return res.text();
        })
        .then(function (html) {
            el.classList.remove('error');
            output.innerHTML = html;
        })
        .catch (function (res) {
            try {
                console.log('template error:', res.status, res.statusText);
                el.classList.add('error');
                res.text().then(function (text) {
                    var status = parseResponseStatus(text, res.status + ' ' + res.statusText);
                    if (status) {
                        output.innerHTML = '<div class="alert alert-danger"><pre>' + status.errorCode + ' ' + htmlEscape(status.message) +
                            (status.stackTrace ? '\n\nStackTrace:\n' + htmlEscape(status.stackTrace) : '') + '</pre></div>';
                    }
                })
            } catch(e) {
                output.innerHTML = '<div class="alert alert-danger"><pre>' + res.status + ' ' + res.statusText + '</pre></div>';
            }
        });
    };
    textarea.oninput();
    
    function parseResponseStatus(json, defaultMsg) {
        try {
            var err = JSON.parse(json);
            return sanitize(err.ResponseStatus || err.responseStatus);
        } catch (e) {
            return {
                message: defaultMsg,
                __error: { error: e, json: json }
            };
        }
    }
    function sanitize(status) {
        if (status["errors"])
            return status;

        var to = {}, k;
        for (k in status)
            to[toCamelCase(k)] = status[k];
        
        to.errors = [];
        var errors = status.Errors || [];
        for (var i=0; i<errors.length; i++) {
            var o = errors[i];
            var err = {};
            for (k in o)
                err[toCamelCase(k)] = o[k];
            to.errors.push(err);
        }
        return to;
    }
    function toCamelCase(key) {
        return !key ? key : key.charAt(0).toLowerCase() + key.substring(1);
    }
        
    function htmlEscape(str) {
        return (str || '')
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

</script>
</body>
</html>



